{% extends 'index.html' %}
{% block left-sidebar-a-class %}
<li><a href={% url 'index' %} class=""><i class="lnr lnr-home"></i> <span>主页</span></a></li>
    <li><a href={% url 'elements' %} class=""><i class="lnr lnr-code"></i> <span>topo管理</span></a></li>
    <li><a href={% url 'tables' %} class=""><i class="lnr lnr-dice"></i> <span>流表管理</span></a></li>
    <li><a href={% url 'panels' %} class=""><i class="lnr lnr-cog"></i> <span>业务分类</span></a></li>
    <li><a href={% url 'notifications' %} class=""><i class="lnr lnr-alarm"></i> <span>QoS</span></a></li>
    <li><a href={% url 'charts' %} class="active"><i class="lnr lnr-chart-bars"></i> <span>路由选路</span></a></li>
{% endblock %}
{% block main-content %}
<!-- MAIN CONTENT -->
<div class="main-content">
	<div class="container-fluid">
		<h3 class="page-title">Charts</h3>
		<div class="row">
			<div class="col-md-6">
				<div class="panel">
					<div class="panel-heading">
						<h3 class="panel-title">Line Chart</h3>
					</div>
					<div class="panel-body">
						<div id="demo-line-chart" class="ct-chart"></div>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="panel">
					<div class="panel-heading">
						<h3 class="panel-title">Bar Chart</h3>
					</div>
					<div class="panel-body">
						<div id="demo-bar-chart" class="ct-chart"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="panel">
					<div class="panel-heading">
						<h3 class="panel-title">Area Chart</h3>
					</div>
					<div class="panel-body">
						<div id="demo-area-chart" class="ct-chart"></div>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="panel">
					<div class="panel-heading">
						<h3 class="panel-title">Multiple Chart</h3>
					</div>
					<div class="panel-body">
						<div id="multiple-chart" class="ct-chart"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock %}
<!-- END MAIN CONTENT -->
<!-- END WRAPPER -->
<!-- Javascript -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/vendor/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="assets/vendor/chartist/js/chartist.min.js"></script>
<script src="assets/scripts/klorofil-common.js"></script>
<script>
	$(function () {
		var options;

		var data = {
			labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
			series: [
				[200, 380, 350, 320, 410, 450, 570, 400, 555, 620, 750, 900],
			]
		};

		// line chart
		options = {
			height: "300px",
			showPoint: true,
			axisX: {
				showGrid: false
			},
			lineSmooth: false,
		};

		new Chartist.Line('#demo-line-chart', data, options);

		// bar chart
		options = {
			height: "300px",
			axisX: {
				showGrid: false
			},
		};

		new Chartist.Bar('#demo-bar-chart', data, options);


		// area chart
		options = {
			height: "270px",
			showArea: true,
			showLine: false,
			showPoint: false,
			axisX: {
				showGrid: false
			},
			lineSmooth: false,
		};

		new Chartist.Line('#demo-area-chart', data, options);


		// multiple chart
		var data = {
			labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
			series: [{
				name: 'series-real',
				data: [200, 380, 350, 320, 410, 450, 570, 400, 555, 620, 750, 900],
			}, {
				name: 'series-projection',
				data: [240, 350, 360, 380, 400, 450, 480, 523, 555, 600, 700, 800],
			}]
		};

		var options = {
			fullWidth: true,
			lineSmooth: false,
			height: "270px",
			low: 0,
			high: 'auto',
			series: {
				'series-projection': {
					showArea: true,
					showPoint: false,
					showLine: false
				},
			},
			axisX: {
				showGrid: false,

			},
			axisY: {
				showGrid: false,
				onlyInteger: true,
				offset: 0,
			},
			chartPadding: {
				left: 20,
				right: 20
			}
		};

		new Chartist.Line('#multiple-chart', data, options);

	});
</script>
</body>

</html>